@import './skeleton.css';
/* Loader components using design tokens for dimensions and animation */
/* ------------------------------------------------------------------ */
/* Generic spinner used across multiple components.                   */
/* Size and color can be customized via CSS variables.                */
/* ------------------------------------------------------------------ */
/* Loader dimensions aligned with spacing and duration tokens */
.c-spinner {
  --spinner-size: var(--space-7);
  --spinner-color: var(--color-brand);
  animation: spinner-spin calc(var(--duration-slow) * 2) linear infinite;
  border: var(--space-1) solid var(--color-spinner-track);
  border-radius: 50%;
  border-top: var(--space-1) solid var(--spinner-color);
  height: var(--spinner-size);
  width: var(--spinner-size);
}

/* Utility class to center spinners (or any element) absolutely */
.c-spinner-center {
  left: 50%;
  position: absolute;
  top: 50%;
  translate: -50% -50%;
}

@keyframes spinner-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------------------ */
/* Dot Loader - small bouncing dots for loading states.
   Shared by SocialIcons and Docs pages. */
/* ------------------------------------------------------------------ */
.c-loader,
.c-doc-loader {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: auto; /* allow loaders to be centered in their container */
  padding: var(--space-5); /* ensures consistent spacing */
  text-align: center;

  .c-dot {
    animation: dot-bounce calc(var(--duration-fast) * 7) infinite both;
    background: var(--color-spinner);
    border-radius: 50%;
    height: var(--space-2);
    margin: 0 var(--space-1);
    width: var(--space-2);

    &:nth-child(1) {
      animation-delay: calc(var(--duration-fast) * -1.6);
    }

    &:nth-child(2) {
      animation-delay: calc(var(--duration-fast) * -0.8);
    }
  }
}

@keyframes dot-bounce {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* ------------------------------------------------------------------ */
/* Enhancement Progress Overlay - used by chat when loading features   */
/* Position with `.fixed-bottom-right` utility when displayed.         */
/* ------------------------------------------------------------------ */
.c-enhancement-progress {
  align-items: center;
  background: var(--overlay-surface);
  border: var(--border-0);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-elevation-3);
  color: var(--color-text);
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  transition: opacity var(--duration-normal) var(--easing-standard);
  z-index: 1000;
}

/* Pulsing dots shown inside the progress overlay */
.c-pulse-container {
  height: var(--space-5);
  position: relative;
  width: calc(var(--space-8) - var(--space-2));
}

.c-pulse-dot {
  animation: pulse calc(var(--duration-slow) * 3) infinite;
  background: var(--color-brand);
  border-radius: 50%;
  height: var(--space-2);
  position: absolute;
  width: var(--space-2);
}

.c-pulse-dot-1 {
  left: 0;
}

.c-pulse-dot-2 {
  animation-delay: var(--duration-fast);
  left: var(--space-4);
}

.c-pulse-dot-3 {
  animation-delay: calc(var(--duration-fast) * 2);
  left: var(--space-7);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* ------------------------------------------------------------------ */
/* Full-screen overlay shown during auth page transitions              */
/* ------------------------------------------------------------------ */
.c-auth-overlay {
  align-items: center;
  backdrop-filter: blur(2px);
  background: var(--overlay-surface);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  pointer-events: none; /* ignore clicks until activated */
  position: fixed;
  transition: opacity var(--duration-normal) var(--easing-standard);
  z-index: 1002;
}

/* Modifier class reveals the overlay and blocks interaction */
.c-auth-overlay.is-active {
  opacity: 1;
  pointer-events: all;
}

@media (prefers-reduced-motion: reduce) {
  .c-spinner,
  .c-dot,
  .c-pulse-dot {
    animation: none;
  }
}
